<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <link rel="stylesheet" type="text/css" href="/css/el.css">
    <script src="/js/v2.6.10/vue.js" type="text/javascript" charset="utf-8"></script>
    <script src="/js/el.js"></script>
    <script src="/js/axios.js"></script>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        #app {
            text-align: center;
            padding: 50px;
        }

        .authorizeBody {
            width: 90%;
            display: inline-block;
        }

        .authorizeBody .cell {
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
        }

        .authorizeName {
            font-size: 16px;
            font-weight: bold;
            margin-bottom: 10px;
            text-align: left;
        }

        .authorizeTop{
            padding: 10px 0;
            text-align: left;
            margin-bottom: 20px;
            font-size: 20px;
            font-weight: bold;
            border-bottom: 5px solid #ccc;
        }
    </style>
</head>
<body>
<div id="app">
    <div class="authorizeBody">
        <div class="authorizeTop">
            项目选择:
            <el-select style="margin-left: 10px;" v-model="pId" filterable placeholder="请选择项目">
                 <el-option
                    v-for="item in projects"
                       :key="item.pid"
                       :label="item.pid+'/'+item.pname"
                       :value="item.pid">
                 </el-option>
            </el-select>
        </div>
        <el-row :gutter="20">
            <div style="height: 400px;">
                <el-col :span="12">
                    <div class="authorizeName">
                        可授权用户
                    </div>
                    <div style="text-align: left;margin-bottom: 10px;">
                        <el-input style="width: 30%" v-model="username" placeholder="请输入姓名"></el-input>
                        <el-button type="primary" @click="queryProjectUser()">查询</el-button>
                    </div>
                    <el-table :data="users" border style="width: 100%">
                        <el-table-column prop="userId" label="用户编号" width="180">
                        </el-table-column>
                        <el-table-column prop="name" label="姓名" width="180">
                        </el-table-column>
                        <el-table-column label="操作">
                            <template slot-scope="scope">
                                <div style="text-align: center;">
                                    <el-button size="mini" type="primary" @click="addAuthorize(scope.row)" icon="el-icon-circle-plus-outline">授权</el-button>
                                </div>
                            </template>
                        </el-table-column>
                    </el-table>
                </el-col>
                <el-col :span="12">
                    <div class="authorizeName">
                        已授权用户
                    </div>
                    <div style="text-align: left;margin-bottom: 10px;">
                        <el-input style="width: 30%" v-model="name" placeholder="请输入姓名"></el-input>
                        <el-button type="primary" @click="queryProject()">查询</el-button>
                    </div>
                    <el-table :data="AuthorizeInformation" border style="width: 100%">
                        <el-table-column prop="name" label="姓名">
                        </el-table-column>
                        <el-table-column prop="bname" label="部门">
                        </el-table-column>
                        <el-table-column prop="pname" label="授权项目">
                        </el-table-column>
                        <el-table-column label="操作">
                            <template slot-scope="scope">
                                <div style="text-align: center;">
                                    <el-button size="mini" @click="deleteAuthorize(scope.row)" type="danger" icon="el-icon-delete">移除</el-button>
                                </div>
                            </template>
                        </el-table-column>
                    </el-table>
                </el-col>
            </div>
            <el-col :span="12">
                <el-pagination @current-change="currentChangeUser" @next-click="nextClickUser()" @prev-click="prevClickUser()" background layout="prev, pager, next" :page-size="pageSize" :total="userTotal">
                </el-pagination>
            </el-col>
            <el-col :span="12">
                <el-pagination @current-change="currentChange" @next-click="nextClick()" @prev-click="prevClick()" background layout="prev, pager, next" :page-size="pageSize" :total="total">
                </el-pagination>
            </el-col>
        </el-row>
    </div>
</div>
<script>
    new Vue({
        el: "#app",
        created(){
            this.getProject();
        },
        data() {
            return {
                projects:[],
                pId:'',
                name:'',
                lock:false,
                AuthorizeInformation:[],
                total:0,
                currentPage:1,
                userCurrentPage:1,
                userTotal:0,
                users:[],
                username:'',
                pageSize:5
            }
        },
        methods:{
            deleteAuthorize(row){
                if(!this.lock){
                    this.lock = true;
                    const formData = new FormData();
                    formData.append("authorizeId",row.authorizeId);
                    axios.post("/authorize/deleteAuthorize",formData)
                        .then((response)=>{
                            response = response.data;
                            if(response.code === 403){
                                location.href = "/page/logonPage"
                            }else if(response.code !== 200){
                                this.$message.error(response.message);
                            }else{
                                this.$message({
                                    message: '移除授权',
                                    type: 'success'
                                });
                                this.getUser();
                                this.getAuthorizeInformation();
                            }
                        }).finally(() =>{
                        this.lock = false;
                    })
                }
            },
            addAuthorize(row){
                if(!this.lock){
                    this.lock = true;
                    const formData = new FormData();
                    formData.append("userId",row.userId);
                    formData.append("pId",this.pId);
                    axios.post("/authorize/addAuthorize",formData)
                        .then((response)=>{
                            response = response.data;
                            if(response.code === 403){
                                location.href = "/page/logonPage"
                            }else if(response.code !== 200){
                                this.$message.error(response.message);
                            }else{
                                this.$message({
                                    message: '授权成功',
                                    type: 'success'
                                });
                                this.getUser();
                                this.getAuthorizeInformation();
                            }
                        }).finally(() =>{
                        this.lock = false;
                    })
                }
            },
            getUser(){
                    const formData = new FormData();
                    formData.append("department", this.projects[0].bname);
                    formData.append("name", this.username);
                    formData.append("projectId", this.pId);
                    formData.append("current", this.userCurrentPage);
                    axios.post("/user/getUserExclude",formData)
                        .then((response)=>{
                            response = response.data;
                            if(response.code === 403){
                                location.href = "/page/logonPage"
                            }else if(response.code !== 200){
                                this.$message.error(response.message);
                            }else{
                                this.users = response.data.records;
                                this.userTotal = response.data.total;
                            }
                        })
            },
            getProject(){
                if(!this.lock){
                    this.lock = true;
                    const formData = new FormData();
                    axios.post("/project/getAutProjectList")
                        .then((response)=>{
                            response = response.data;
                            if(response.code === 403){
                                location.href = "/page/logonPage"
                            }else if(response.code !== 200){
                                this.$message.error(response.message);
                            }else{
                                this.projects = response.data;
                            }
                        }).finally(() =>{
                        this.lock = false;
                    })
                }
            },
            getAuthorizeInformation(){
                    const formData = new FormData();
                    formData.append("pId", this.pId);
                    formData.append("name", this.name);
                    formData.append("current", this.currentPage);
                    axios.post("/authorize/getAuthorizeInformation",formData)
                        .then((response)=>{
                            response = response.data;
                            if(response.code === 403){
                                location.href = "/page/logonPage"
                            }else if(response.code !== 200){
                                this.$message.error(response.message);
                            }else{
                                this.total = response.data.total;
                                this.AuthorizeInformation = response.data.records;
                            }
                        })
            },
            queryProjectUser(){
                this.userCurrentPage = 1;
                this.getUser();
            },
            currentChangeUser(e){
                this.userCurrentPage = e;
                this.getUser();
            },
            prevClickUser(){
                if(this.userCurrentPage-1 === 0){
                    return;
                }
                this.userCurrentPage -= 1;
                this.getUser();
            },
            nextClickUser(){
                this.userCurrentPage += 1;
                this.getUser();
            },
            queryProject(){
                this.currentPage = 1;
                this.getAuthorizeInformation();
            },
            currentChange(e){
                this.currentPage = e;
                this.getAuthorizeInformation();
            },
            prevClick(){
                if(this.currentPage-1 === 0){
                    return;
                }
                this.currentPage -= 1;
                this.getAuthorizeInformation();
            },
            nextClick(){
                this.currentPage += 1;
                this.getAuthorizeInformation();
            }
        },
        watch:{
            pId: {
                handler: function(newVal, oldVal) {
                    if(newVal === ""){
                        return;
                    }
                    this.getAuthorizeInformation();
                    this.getUser();
                },
                deep: true,
                immediate: true,
            }
        }
    })
</script>
</body>
</html>